<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
  <title>Officebar example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ribbon.css" />
  <style type="text/css">
  * { padding: 0; margin: 0; }

  body {
    background: url(images/img01.jpg) repeat-x left top;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    height:800px;
  }
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.officebar.js"></script>
  <script type="text/javascript">
  /* <![CDATA[ */
    $(document).ready(function() {
      $("#testRibbon").officebar({
        onSelectTab:           function(e) { $("#log").append("tab clicked: "+e.rel+"<br/>"); },
        onBeforeShowSplitMenu: function(e) { $("#log").append("before split open: "+e.rel+"<br/>"); },
        onAfterShowSplitMenu:  function(e) { $("#log").append("after split open: "+e.rel+"<br/>"); },
        onAfterHideSplit:      function(e) { $("#log").append("split menu closed<br/>"); },
        onShowDropdown:        function(e) { $("#log").append("opened dropdown: "+e.rel+"<br/>"); },
        onHideDropdown:        function(e) { $("#log").append("closed dropdown: "+e.rel+"<br/>"); },
        onClickButton:         function(e) { $("#log").append("clicked on: "+e.rel+"<br/>"); }
        })

        $("#testRibbon").officebarBind("textboxes", function(e) { $("#log").append("custom bind on textboxes tab<br/>"); } );        
        $("#testRibbon").officebarBind("home>blablabutton", function(e) { $("#log").append("custom bind on blablabutton<br/>"); } );
        $("#testRibbon").officebarBind("insert>new", function(e) { $("#log").append("custom bind on new<br/>"); } );
      }
    );
  /* ]]> */
  </script>
</head>
<body>
  <div id="testRibbon" class="officebar">
    <ul>
      <li class="current">
        <a href="#" rel="home">Home</a>
        <ul>
          <li>
            <span>Clipboard</span>
            <div class="button split">
              <a href="#" rel="paste">
                <img src="images/paste32.png" alt="" /><span>Paste</span>
              </a>
              <div>
                <ul>
                  <li class="menutitle">Paste options</li>
                  <li><a href="#"><img src="images/paste16.gif" alt="" />Paste</a></li>
                  <li><a href="#">Paste special...</a></li>
                  <li class="separator"><a href="#"><img src="images/link16.gif" alt="" />Paste link</a></li>
                  <li class="menutitle">Clipboard options</li>
                  <li><a href="#">Clear clipboard</a></li>
                  <li><a href="#"><img src="images/pasteall16.gif" alt="" />View clipboard content</a></li>
                  <li><a href="#">Another</a></li>
                </ul>
              </div>
            </div>
            <div class="button">
              <a href="#" rel="textbutton">Plain text button</a>
            </div>
            <div class="button list">
              <ul>
                <li><a href="#"><img src="images/copy16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/cut16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/copyformat16.gif" alt="" /></a></li>
              </ul>
            </div>
          </li>
          <li>
            <span>Drawing</span>
            <div class="button">
              <a href="#" rel="table"><img src="images/drawtools32.png" alt="" />Tools</a>
            </div>
          </li>
          <li>
            <span>Empty panel</span>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" rel="insert">Insert</a>
        <ul>
          <li>
            <span>Pages</span>
            <div class="button">
              <a href="#"><img src="images/cover32.png" alt="" />Cover</a>
            </div>
            <div class="button list">
              <ul>
                <li><a href="#" rel="new"><img src="images/new16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/pagejump16.gif" alt="" /></a></li>
              </ul>
            </div>
          </li>
          <li>
            <span>Tables</span>
            <div class="button">
              <a href="#"><img src="images/table32.png" alt="" />Table</a>
            </div>
          </li>
          <li>
            <span>Graphics</span>
            <div class="button">
              <a href="#"><img src="images/image32.png" alt="" />Image</a>
            </div>
            <div class="button">
              <a href="#"><img src="images/clipart32.png" alt="" />Clip</a>
            </div>
            <div class="button list">
              <ul>
                <li><a href="#"><img src="images/shapesquare16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/smartart16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/chart16.gif" alt="" /></a></li>
              </ul>
            </div>
          </li>
          <li>
            <span>Links</span>
            <div class="button textlist">
              <ul>
                <li><a href="#"><img src="images/link16.gif" alt="" />Link</a></li>
                <li><a href="#"><img src="images/removelink16.gif" alt="" />Remove link</a></li>
              </ul>
            </div>
          </li>
          <li>
            <span>Header and Footer</span>
            <div class="button textlist">
              <ul>
                <li class="dropdown">
                  <a href="#" rel="header"><img src="images/header16.gif" alt="" />Header</a>
                  <div>
                    <ul>
                      <li><a href="#">Paste special...</a></li>
                      <li><a href="#">Clear clipboard</a></li>
                      <li><a href="#">Another</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="#"><img src="images/footer16.gif" alt="" />Footer</a></li>
                <li><a href="#"><img src="images/pagenumber16.gif" alt="" />Page number</a></li>
              </ul>
            </div>
          </li>
          <li>
            <span>Text</span>
            <div class="button list">
              <ul>
                <li><a href="#"><img src="images/textframe16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/quickitems16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/wordart16.gif" alt="" /></a></li>
              </ul>
              <ul>
                <li><a href="#"><img src="images/capitalletter16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/signatureline16.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/datetime16.gif" alt="" /></a></li>
              </ul>
              <ul>
                <li><a href="#"><img src="images/insertobject16.gif" alt="" /></a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" rel="textboxes">TextBoxes</a>
        <ul>
          <li>
            <span>With image and label</span>
            <div class="textboxlist">
              <ul>
                <li><img src="images/link16.gif" alt="" />Link<input type="text" /></li>
              </ul>
            </div>
            <div class="textboxlist">
              <ul>
                <li><img src="images/link16.gif" alt="" />Style name<input type="text" /></li>
                <li><img src="images/replace16.gif" alt="" />Replace word<input type="text" /></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div id="log" style="width: 400px; border:1px solid black">
  </div>
</body>
</html>
